<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show1 = true">选择单个日期</fu-button>
        <fu-calendar
          v-model:show="show1"
          :value="value1"
          :close-on-click-overlay="true"
          @confirm="onConfirm1"
          @cancel="onCancel"
        />
      </view>
    </view>
    
    <!-- 选择范围 -->
    <view class="demo-block">
      <view class="demo-block__title">选择范围</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show2 = true">选择日期范围</fu-button>
        <fu-calendar
          v-model:show="show2"
          type="range"
          :value="value2"
          @confirm="onConfirm2"
          @cancel="onCancel"
        />
      </view>
    </view>
    
    <!-- 多选模式 -->
    <view class="demo-block">
      <view class="demo-block__title">多选模式</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show3 = true">选择多个日期</fu-button>
        <fu-calendar
          v-model:show="show3"
          type="multiple"
          :value="value3"
          @confirm="onConfirm3"
          @cancel="onCancel"
        />
      </view>
    </view>
    
    <!-- 自定义日期 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义日期</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show4 = true">自定义日期</fu-button>
        <fu-calendar
          v-model:show="show4"
          :value="value4"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @confirm="onConfirm4"
          @cancel="onCancel"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      
      minDate: '2024-01-01',
      maxDate: '2024-12-31'
    }
  },
  methods: {
    // 单选
    onConfirm1(dates) {
      this.value1 = dates
      uni.showToast({
        title: `选择了：${dates[0]}`,
        icon: 'none'
      })
    },
    
    // 范围选择
    onConfirm2(dates) {
      this.value2 = dates
      if (dates.length === 2) {
        uni.showToast({
          title: `选择了：${dates[0]} 至 ${dates[1]}`,
          icon: 'none'
        })
      }
    },
    
    // 多选
    onConfirm3(dates) {
      this.value3 = dates
      uni.showToast({
        title: `选择了 ${dates.length} 个日期`,
        icon: 'none'
      })
    },
    
    // 自定义日期
    onConfirm4(dates) {
      this.value4 = dates
      uni.showToast({
        title: `选择了：${dates[0]}`,
        icon: 'none'
      })
    },
    
    // 取消选择
    onCancel() {
      uni.showToast({
        title: '取消选择',
        icon: 'none'
      })
    },
    
    // 日期格式化函数
    formatter(day) {
      const date = new Date(day.dateStr)
      const month = date.getMonth() + 1
      const isHoliday = [1, 7].includes(date.getDay())
      
      if (isHoliday) {
        day.bottomInfo = '休'
      }
      
      if (month === 1 && date.getDate() === 1) {
        day.bottomInfo = '元旦'
      }
      
      return day
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    padding: 30rpx;
    border-radius: var(--fu-radius-base);
  }
}
</style> 